<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户级别</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
    <menutabs :menu="menu" :active="active" :handleClick="handleClick"></menutabs>
    <component :is="menu[active].component"></component>
    </el-card>

  </div>
</template>

<script>
import menutabs from '../../components/menutabs.vue'
import domesticconsumer from './components/domesticconsumer.vue'
import vipuser from './components/vipuser.vue'
import crownusers from './components/crownusers.vue'
import { supplierMenu } from '../../utils/config'
export default {
  components: {
    menutabs,
    domesticconsumer,
    vipuser,
    crownusers
  },
  data() {
    return {
      active: 0,
      menu: []
    }
  },
  methods: {
    handleClick(data) {
      this.active = data.index * 1
    }
  },
  mounted() {
    this.menu = supplierMenu
  }

}
</script>

<style lang="less" scoped>
</style>
